import React from 'react';
import {render} from 'react-dom';

class TodoList extends React.Component{
	render(){
		return (
			<ul>
				{
					this.props.list.map((item,index)=>{
						return <li key={index}>{item}</li>
					})
				}
			</ul>
		)
	}
}

//使用ES6声明组件
//没有getInitialState方法，需要放到构造函数里面

//声明组件
class TodoApp extends React.Component{
	constructor(props){
		super(props);

		//初始化状态
		this.state={
			todoList:['张三','李四']
		}
		//给事件修正this指针问题
		this.addTodo=this.addTodo.bind(this)
	}

	addTodo(){
		var content=this.refs.textContent.value;
		var data=this.state.todoList;
		data.push(content);

		this.setState({
			todoList:data
		})
	}

	render(){
		return(
			<div>
				<h1>todo App</h1>
				<input type="text" ref="textContent"/>
				<button onClick={this.addTodo}>邱神</button>
				<TodoList list={this.state.todoList}/>
			</div>
		)
	}
}

render(
	<TodoApp/>,
	document.querySelector('#box')
)